<template>
  <div>
    <div class="header-title">目录清单编制</div>
    <div class="context">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-row>
          <el-col :span="24">
            <el-form-item style="margin-right: 60px" label="事项名称：">
              <el-input v-model="formInline.user" placeholder="请输入事项名称"></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 60px" label="基本编译：">
              <el-input v-model="formInline.user" placeholder="请输入基本编译"></el-input>
            </el-form-item>
            <el-form-item style="margin-right: 60px" label="事项类型：">
              <el-select v-model="formInline.region" placeholder="请选择事项类型">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button type="primary" @click="onSubmit" style="width: 120px">搜索</el-button>
              <el-button type="success" @click="onCompile" style="width: 120px">+增加</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="清单状态：">
              <el-radio-group v-model="radio1">
                <el-button plain>全部</el-button>
                <el-button plain>待提交审核</el-button>
                <el-button plain>待提交</el-button>
                <el-button plain>审核不通过</el-button>
                <el-button plain>发布</el-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="index" label="序号" width="98"></el-table-column>
        <el-table-column label="事项类型" width="271">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="基本编码" width="198"></el-table-column>
        <el-table-column prop="address" label="事项名称" width="372" show-overflow-tooltip></el-table-column>

        <el-table-column prop="name" label="行使层级" width="294"></el-table-column>

        <el-table-column prop="name" label="是否主项" width="118"></el-table-column>

        <el-table-column prop="name" label="状态" width="103"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">查询</el-button>
            <el-button size="mini" type="warning" @click="handleDelete(scope.$index, scope.row)">子项</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="90"></el-pagination>
    </div>
  </div>
</template>

<script>
  const cityOptions = [
    '国家级/局（署，会）',
    '省级/直属',
    '市级/隶属',
    '县级',
    '镇（乡，街道）级',
    '村（社区）级',
    '分级管理'
  ];
  export default {
    data() {
      return {
        tableData: [
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }
        ],
        multipleSelection: [],

        checkboxGroup1: ['上海'],
        cities: cityOptions,
        radio1: '1',
        formInline: {
          user: '',
          region: ''
        },
        visible: false
      };
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      onCompile() {
        this.$router.push('/compileChildren');
      }
    }
  };
</script>

<style lang="scss">
  @import '../../../assets/css/publicList.scss';
</style>
